<!DOCTYPE html>
<title>A single track should not show overflow on caption button-press, instead just toggle.</title>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script src="../media-controls.js"></script>
<video controls></video>
<script>
async_test(t => {
  var captions = ["Caption"];
  var video = document.querySelector("video");
  enableTestMode(video);

  video.oncanplaythrough = t.step_func(_ => {
    video.oncanplaythrough = undefined;
    var track1 = video.addTextTrack("captions");

    for (var i = 0; i < captions.length; ++i)
      track1.addCue(new VTTCue(0, 120, captions[i]));

    // The controls are updated asynchronously.
    assert_false(isClosedCaptionsButtonEnabled(video));

    setTimeout(t.step_func(_ => {
      assert_true(isClosedCaptionsButtonEnabled(video));

      // The captions track should be listed in textTracks, but not yet loaded.
      assert_equals(video.textTracks.length, 1);
      assert_equals(video.textTracks[0].mode, "hidden");
      checkCaptionsHidden(video);

      // Get the menu that displays the list of text tracks.
      var captionsList = mediaControlsElement(internals.shadowRoot(video).firstChild,
        "-internal-media-controls-text-track-list");

      clickCaptionButton(video, t.step_func(() => {

        // Captions should still be hidden until playback begins
        assert_equals(getComputedStyle(captionsList).display, "none");
        checkCaptionsHidden(video);

        video.play();
        video.onplaying = t.step_func(() => {
          // Captions track should become visible after playback begins
          checkCaptionsVisible(video, captions);
          checkButtonHasClass(toggleClosedCaptionsButton(video), "visible");

          // Click the closed captions button again and make sure the menu does not appear.
          clickCaptionButton(video, t.step_func_done(() => {
            assert_equals(getComputedStyle(captionsList).display, "none");

            // Captions track should become invisible after the closed caption button is pressed.
            checkCaptionsHidden(video);
            checkButtonNotHasClass(toggleClosedCaptionsButton(video), "visible");
          }));
        });
      }));
    }));
  });

  video.src = "../content/counting.ogv";
});
</script>
